import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:management_system/pages/compents/password.dart';
import 'package:management_system/pages/login.dart';
import 'package:pinput/pinput.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
class RegisterPage extends StatefulWidget {
  const RegisterPage({super.key});

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  bool state = false;

  int flow = 0;

  int radio = 1;


  bool complete = false;


  List<String> list = ["只有我","2-5","6-10","11-20","21-40","41-50","51-100","100-500"];

  String select = "";
  
  
  List<String> mails = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        backgroundColor: Colors.transparent,
        
      ),
      backgroundColor: complete ? Colors.white: Color(0xFFE3ECFA),
      body: complete ? Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            SizedBox(height: 100),
            Image.asset("images/完成.png",width: 500.w,height: 357.w),
            SizedBox(height: 36.w),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("恭喜您，注册成功",
                    style: TextStyle(
                        fontWeight: FontWeight.normal,
                        fontSize: 22.sp)
                ),
              ],
            ),
            SizedBox(height: 30),
            SizedBox(
              width: 170.w,
              child: FilledButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0XFF3F8CFF),
                  shape: RoundedRectangleBorder(
                      borderRadius:
                      BorderRadius.circular(14.w)),
                  shadowColor: const Color.fromRGBO(
                      196, 203, 214, 0.1036),
                ),
                onPressed: () {

                  Navigator.push(context, MaterialPageRoute(builder: (context){
                    return new LoginPage();
                  }));
                },
                child: Text('现在开始吧',
                    style: TextStyle(fontSize: 16.w)
                ),
              ),
            )
          ],
        ),
      ): Container(
        padding: const EdgeInsets.all(20),
        alignment: Alignment.center,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(24),
          child: Container(
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.only(left: 40),
                  width: 346.w,
                  color: const Color(0xFF3F8CFF),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    // mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(height: 107.w),
                      Text("开始注册",
                          style: TextStyle(
                              color: Color(0xFFFFFFFF),
                              fontWeight:
                              FontWeight.normal,
                              fontSize: 36.sp)
                              ),
                      SizedBox(height: 60.w),
                      FlowWidget(
                        flow: flow,
                        step: 4,
                        list: ["验证手机号", "自我介绍", "公司概况", "邀请团队成员"],
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 30.w),
                Expanded(
                    child: Stack(
                  children: [
                    IndexedStack(
                      index: flow,
                      children: [
                        Container(
                          color: Colors.white,
                          child: ListView(
                            children: [
                              Container(
                                padding: EdgeInsets.symmetric(horizontal: 300.w),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(height: 50.w),
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                        Column(
                                          children: [
                                            Text("步骤1/4",
                                                style: TextStyle(
                                                        color: Color(0xFF3F8CFF),
                                                        fontWeight:
                                                            FontWeight.normal,
                                                        fontSize: 17.sp)
                                                    ),
                                            SizedBox(height: 7),
                                            Text("验证你的手机号",
                                                style: TextStyle(
                                                        fontWeight:
                                                            FontWeight.normal,
                                                        fontSize: 22.sp)
                                                    ),
                                          ],
                                        ),
                                      ],
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 36.w),
                                      child: Text("手机号",
                                          style: TextStyle(
                                                  color: Color(0xFF7D8592),
                                                  fontWeight: FontWeight.w400,
                                                  fontSize: 14.sp)
                                              ),
                                    ),
                                    SizedBox(height: 8.w),
                                    Container(
                                        decoration: BoxDecoration(
                                            border: Border.all(
                                              color: Color(0xFFD8E0F0),
                                            ),
                                            borderRadius:
                                                BorderRadius.circular(14)),
                                        child: Stack(
                                          children: [
                                            TextField(
                                              inputFormatters: <TextInputFormatter>[
                                                LengthLimitingTextInputFormatter(
                                                    11),
                                              ],
                                              decoration: InputDecoration(
                                                  border: InputBorder.none,
                                                  hintText: "请输入手机号",
                                                  hintStyle: TextStyle(
                                                      color: Color(0xFF7D8592),
                                                      fontWeight: FontWeight.w400,
                                                      fontSize: 14),
                                                  contentPadding:
                                                      EdgeInsets.symmetric(
                                                          horizontal: 10)),
                                            ),
                                            Positioned(
                                              right: 13,
                                              bottom: 15,
                                              child: MouseRegion(
                                                cursor: SystemMouseCursors.click,
                                                child: Text("获取验证码",
                                                    style: TextStyle(
                                                            color:
                                                                Color(0XFF3F8CFF),
                                                            fontWeight:
                                                                FontWeight.normal,
                                                            fontSize: 14.sp)
                                                        ),
                                              ),
                                            ),
                                          ],
                                        )),
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Container(
                                          margin: EdgeInsets.only(
                                              left: 7.w, top: 26.w, bottom: 7.w),
                                          child: Text("短信验证码",
                                              style: TextStyle(
                                                      color: Color(0xFF7D8592),
                                                      fontWeight: FontWeight.w400,
                                                      fontSize: 14.sp)
                                                  ),
                                        ),
                                        Pinput(
                                          length: 6,
                                          onCompleted: (pin) => print(pin),
                                          defaultPinTheme: PinTheme(
                                              width: 60.w,
                                              padding: EdgeInsets.symmetric(
                                                  vertical: 10),
                                              decoration: BoxDecoration(
                                                  border: Border.all(
                                                      color: Color(0xFFB8C8E0)),
                                                  borderRadius:
                                                      BorderRadius.circular(14.w))),
                                          submittedPinTheme: PinTheme(
                                              width: 60.w,
                                              padding: EdgeInsets.symmetric(
                                                  vertical: 10),
                                              decoration: BoxDecoration(
                                                  border: Border.all(
                                                      color: Color(0xFF3F8CFF)),
                                                  borderRadius:
                                                      BorderRadius.circular(14.w))),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(top: 15.w),
                                          padding: EdgeInsets.only(
                                              top: 20.w,
                                              bottom: 24.w,
                                              left: 22.w,
                                              right: 30.w),
                                          decoration: BoxDecoration(
                                              color: Color(0XFFF4F9FD),
                                              borderRadius:
                                                  BorderRadius.circular(14.w)),
                                          child: Row(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Container(
                                                  margin: EdgeInsets.only(top: 2),
                                                  child: Image.asset(
                                                      "images/提示.png",
                                                      width: 20,
                                                      height: 20)),
                                              SizedBox(width: 9.w),
                                              Expanded(
                                                child: Text(
                                                  "短信验证码已发送至您的手机号码 15810380593，有效期至 01:25",
                                                  style: TextStyle(
                                                          color: Color(0xFF3F8CFF))
                                                      ,
                                                ),
                                              ),
                                            ],
                                          ),
                                        )
                                      ],
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 16.w),
                                      child: Text("邮箱",
                                          style: TextStyle(
                                                  color: Color(0xFF7D8592),
                                                  fontWeight: FontWeight.w400,
                                                  fontSize: 14.sp)
                                              ),
                                    ),
                                    SizedBox(height: 8.w),
                                    Container(
                                        decoration: BoxDecoration(
                                            border: Border.all(
                                              color: Color(0xFFD8E0F0),
                                            ),
                                            borderRadius:
                                                BorderRadius.circular(14)),
                                        child: TextField(
                                          decoration: InputDecoration(
                                              border: InputBorder.none,
                                              hintText: "请输入邮箱",
                                              hintStyle: TextStyle(
                                                  color: Color(0xFF7D8592),
                                                  fontWeight: FontWeight.w400,
                                                  fontSize: 14),
                                              contentPadding: EdgeInsets.symmetric(
                                                  horizontal: 10)),
                                        )),
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 16.w),
                                      child: Text("密码",
                                          style: TextStyle(
                                                  color: Color(0xFF7D8592),
                                                  fontWeight: FontWeight.w400,
                                                  fontSize: 14.sp)
                                              ),
                                    ),
                                    PwdTextField(),


                                    SizedBox(height: 70,)
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          color: Colors.white,
                          child: ListView(
                            children: [
                              SizedBox(height: 50.w),
                              Column(
                                children: [
                                  Text("步骤2/4",
                                      style: TextStyle(
                                          color: Color(0xFF3F8CFF),
                                          fontWeight:
                                          FontWeight.normal,
                                          fontSize: 17.sp)
                                  ),
                                  SizedBox(height: 7),
                                  Text("自我介绍",
                                      style: TextStyle(
                                          fontWeight:
                                          FontWeight.normal,
                                          fontSize: 22.sp)
                                  ),
                                ],
                              ),
                              Container(
                                margin: EdgeInsets.only(left: 300.w,top: 25),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 16.w),
                                      child: Text("您为什么要使用该服务？",
                                          style: TextStyle(
                                              color: Color(0xFF7D8592),
                                              fontWeight: FontWeight.w400,
                                              fontSize: 14.sp)
                                      ),
                                    ),
                                    SizedBox(height: 7),
                                    Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Container(
                                          width: 403.w,
                                          child: DropdownButtonFormField2<String>(
                                            isExpanded: true,
                                            decoration: InputDecoration(
                                              contentPadding: const EdgeInsets.symmetric(vertical: 16),
                                              border: OutlineInputBorder(
                                                borderRadius: BorderRadius.circular(14),
                                              ),
                                            ),
                                            hint: const Text(
                                              '请选择',
                                              style: TextStyle(fontSize: 14,color: Color(0XFF7D8592)),
                                            ),
                                            items: ["工作"]
                                                .map((item) => DropdownMenuItem<String>(
                                              value: item,
                                              child: Text(
                                                item,
                                                style: const TextStyle(
                                                  fontSize: 14,
                                                ),
                                              ),
                                            )).toList(),
                                            validator: (value) {
                                              if (value == null) {
                                                return '请选择';
                                              }
                                              return null;
                                            },
                                            onChanged: (value) {
                                              //Do something when selected item is changed.
                                            },
                                            onSaved: (value) {
                                              // selectedValue = value.toString();
                                            },
                                            buttonStyleData: const ButtonStyleData(
                                              padding: EdgeInsets.only(right: 8),
                                            ),
                                            iconStyleData: const IconStyleData(
                                              icon: Icon(
                                                Icons.arrow_drop_down,
                                                color: Colors.black45,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 26.w),
                                      child: Text("什么最能描述你？",
                                          style: TextStyle(
                                              color: Color(0xFF7D8592),
                                              fontWeight: FontWeight.w400,
                                              fontSize: 14.sp)
                                      ),
                                    ),
                                    SizedBox(height: 7),
                                    Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Container(
                                          width: 403.w,
                                          child: DropdownButtonFormField2<String>(
                                            isExpanded: true,
                                            decoration: InputDecoration(
                                              contentPadding: const EdgeInsets.symmetric(vertical: 16),
                                              border: OutlineInputBorder(
                                                borderRadius: BorderRadius.circular(14),
                                              ),
                                            ),
                                            hint: const Text(
                                              '请选择',
                                              style: TextStyle(fontSize: 14,color: Color(0XFF7D8592)),
                                            ),
                                            items: ["高管"]
                                                .map((item) => DropdownMenuItem<String>(
                                              value: item,
                                              child: Text(
                                                item,
                                                style: const TextStyle(
                                                  fontSize: 14,
                                                ),
                                              ),
                                            )).toList(),
                                            validator: (value) {
                                              if (value == null) {
                                                return '请选择';
                                              }
                                              return null;
                                            },
                                            onChanged: (value) {
                                              //Do something when selected item is changed.
                                            },
                                            onSaved: (value) {
                                              // selectedValue = value.toString();
                                            },
                                            buttonStyleData: const ButtonStyleData(
                                              padding: EdgeInsets.only(right: 8),
                                            ),
                                            iconStyleData: const IconStyleData(
                                              icon: Icon(
                                                Icons.arrow_drop_down,
                                                color: Colors.black45,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                    Container(
                                      width: 403.w,
                                      margin: EdgeInsets.only(left: 7.w, top: 16.w),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text("什么最能描述你？",
                                              style: TextStyle(
                                                  color: Color(0xFF7D8592),
                                                  fontWeight: FontWeight.w400,
                                                  fontSize: 14.sp)
                                          ),

                                         Row(
                                           mainAxisSize: MainAxisSize.min,
                                           children: [
                                             Radio(
                                               value: 1,
                                               groupValue: radio,
                                               onChanged: (newValue) {
                                                 setState(() {
                                                   radio = newValue!;
                                                 });
                                               },
                                             ),
                                             Text("是的",
                                                 style: TextStyle(
                                                     color: Color(0XFF0A1629),
                                                     fontWeight: FontWeight.w400,
                                                     fontSize: 16.sp)
                                             ),
                                             Radio(
                                               value: 2,
                                               groupValue:radio,
                                               onChanged: (value) {
                                                 setState(() {
                                                   radio = value!;
                                                 });
                                               },
                                             ),
                                             Text("不",
                                                 style: TextStyle(
                                                     color: Color(0XFF0A1629),
                                                     fontWeight: FontWeight.w400,
                                                     fontSize: 16.sp)
                                             )
                                           ],
                                         ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          color: Colors.white,
                          child: ListView(
                            children: [

                              SizedBox(height: 50.w),
                              Column(
                                children: [
                                  Text("步骤3/4",
                                      style: TextStyle(
                                          color: Color(0xFF3F8CFF),
                                          fontWeight:
                                          FontWeight.normal,
                                          fontSize: 17.sp)
                                  ),
                                  SizedBox(height: 7),
                                  Text("公司概况",
                                      style: TextStyle(
                                          fontWeight:
                                          FontWeight.normal,
                                          fontSize: 22.sp)
                                  ),
                                ],
                              ),
                              Container(
                                margin: EdgeInsets.only(left: 300.w,top: 25),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 16.w),
                                      child: Text("贵公司名称？",
                                          style: TextStyle(
                                              color: Color(0xFF7D8592),
                                              fontWeight: FontWeight.w400,
                                              fontSize: 14.sp)
                                      ),
                                    ),
                                    SizedBox(height: 7),
                                    Container(
                                        width: 403.w,
                                        decoration: BoxDecoration(
                                            border: Border.all(
                                              color: Color(0xFFD8E0F0),
                                            ),
                                            borderRadius:
                                            BorderRadius.circular(14)),
                                        child: TextField(
                                          decoration: InputDecoration(
                                              border: InputBorder.none,
                                              hintText: "公司名称",
                                              hintStyle: TextStyle(
                                                  color: Color(0xFF7D8592),
                                                  fontWeight: FontWeight.w400,
                                                  fontSize: 14),
                                              contentPadding: EdgeInsets.symmetric(
                                                  horizontal: 10)),
                                        )),
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 26.w),
                                      child: Text("业务方向",
                                          style: TextStyle(
                                              color: Color(0xFF7D8592),
                                              fontWeight: FontWeight.w400,
                                              fontSize: 14.sp)
                                      ),
                                    ),
                                    SizedBox(height: 7),
                                    Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Container(
                                          width: 403.w,
                                          child: DropdownButtonFormField2<String>(
                                            isExpanded: true,
                                            decoration: InputDecoration(
                                              contentPadding: const EdgeInsets.symmetric(vertical: 16),
                                              border: OutlineInputBorder(
                                                borderRadius: BorderRadius.circular(14),
                                              ),
                                            ),
                                            hint: const Text(
                                              '请选择',
                                              style: TextStyle(fontSize: 14,color: Color(0XFF7D8592)),
                                            ),
                                            items: ["信息技术和编程"]
                                                .map((item) => DropdownMenuItem<String>(
                                              value: item,
                                              child: Text(
                                                item,
                                                style: const TextStyle(
                                                  fontSize: 14,
                                                ),
                                              ),
                                            )).toList(),
                                            validator: (value) {
                                              if (value == null) {
                                                return '请选择';
                                              }
                                              return null;
                                            },
                                            onChanged: (value) {
                                              //Do something when selected item is changed.
                                            },
                                            onSaved: (value) {
                                              // selectedValue = value.toString();
                                            },
                                            buttonStyleData: const ButtonStyleData(
                                              padding: EdgeInsets.only(right: 8),
                                            ),
                                            iconStyleData: const IconStyleData(
                                              icon: Icon(
                                                Icons.arrow_drop_down,
                                                color: Colors.black45,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 26.w),
                                      child: Text("你的团队有多少人？",
                                          style: TextStyle(
                                              color: Color(0xFF7D8592),
                                              fontWeight: FontWeight.w400,
                                              fontSize: 14.sp)
                                      ),
                                    ),
                                    SizedBox(height: 12.w),
                                    Container(
                                      width: 403.w,
                                      child: Wrap(
                                          runSpacing:12,
                                          spacing:12,
                                        children: list.map((e) => InkWell(
                                          onTap:(){
                                            setState(() {
                                              select = e;
                                            });
                                          },
                                          child: MouseRegion(
                                            cursor: SystemMouseCursors.click,
                                            child: Container(
                                              width: 88.w,
                                              height: 48.w,
                                                alignment:Alignment.center,
                                              decoration: BoxDecoration(
                                                color: select == e ?Color(0xFF3F8CFF) : null,
                                                border: Border.all(color: Color(0xFFD8E0F0)),
                                                borderRadius: BorderRadius.circular(10)
                                              ),
                                              child: Text("${e}",
                                                  style: TextStyle(
                                                      color:select == e ? Colors.white: Color(0xFF7D8592),
                                                      fontWeight: FontWeight.w400,
                                                      fontSize: 14.sp)
                                              ),
                                            ),
                                          ),
                                        )).toList(),
                                      ),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          color: Colors.white,
                          child: ListView(
                            children: [

                              SizedBox(height: 50.w),
                              Column(
                                children: [
                                  Text("步骤4/4",
                                      style: TextStyle(
                                          color: Color(0xFF3F8CFF),
                                          fontWeight:
                                          FontWeight.normal,
                                          fontSize: 17.sp)
                                  ),
                                  SizedBox(height: 7),
                                  Text("邀请团队成员",
                                      style: TextStyle(
                                          fontWeight:
                                          FontWeight.normal,
                                          fontSize: 22.sp)
                                  ),
                                ],
                              ),
                              Container(
                                margin: EdgeInsets.only(left: 300.w,top: 25),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      margin: EdgeInsets.only(left: 7.w, top: 16.w),
                                      child: Text("成员邮箱？",
                                          style: TextStyle(
                                              color: Color(0xFF7D8592),
                                              fontWeight: FontWeight.w400,
                                              fontSize: 14.sp)
                                      ),
                                    ),
                                    Column(
                                      children: [
                                        Container(
                                            margin: EdgeInsets.only(top: 7.w),
                                            width: 403.w,
                                            decoration: BoxDecoration(
                                                border: Border.all(
                                                  color: Color(0xFFD8E0F0),
                                                ),
                                                borderRadius:
                                                BorderRadius.circular(14)),
                                            child: TextField(
                                              decoration: InputDecoration(
                                                  border: InputBorder.none,
                                                  hintText: "成员邮箱",
                                                  hintStyle: TextStyle(
                                                      color: Color(0xFF7D8592),
                                                      fontWeight: FontWeight.w400,
                                                      fontSize: 14),
                                                  contentPadding: EdgeInsets.symmetric(
                                                      horizontal: 10)),
                                            )),
                                        
                                        for(int i =0; i< mails.length; i++)
                                          Container(
                                              margin: EdgeInsets.only(top: 17.w),
                                              width: 403.w,
                                              decoration: BoxDecoration(
                                                  border: Border.all(
                                                    color: Color(0xFFD8E0F0),
                                                  ),
                                                  borderRadius:
                                                  BorderRadius.circular(14)),
                                              child: TextField(
                                                decoration: InputDecoration(
                                                    border: InputBorder.none,
                                                    hintText: "成员邮箱",
                                                    hintStyle: TextStyle(
                                                        color: Color(0xFF7D8592),
                                                        fontWeight: FontWeight.w400,
                                                        fontSize: 14),
                                                    contentPadding: EdgeInsets.symmetric(
                                                        horizontal: 10)),
                                              )),



                                      ],
                                    ),
                                    InkWell(
                                      onTap: (){
                                        setState(() {
                                          mails.add("");
                                        });
                                      },
                                      child: MouseRegion(
                                          cursor:SystemMouseCursors.click,
                                        child: Container(
                                          margin: EdgeInsets.only(top: 26.w),
                                          child: Row(
                                            children: [
                                              Container(
                                                child: Icon(Icons.add,color: Color(0xFF3F8CFF)),
                                              ),
                                              Container(
                                                margin: EdgeInsets.only(left: 7.w),
                                                child: Text("添加另一个成员",
                                                    style: TextStyle(
                                                        color: Color(0xFF3F8CFF),
                                                        fontWeight: FontWeight.w400,
                                                        fontSize: 16.sp)
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ),


                                    SizedBox(height: 80.w,)

                                  ],
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                    Positioned.fill(
                        child: Container(

                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Divider(),
                          Container(
                            color:Colors.white,
                            margin: EdgeInsets.only(left: 60.w,right: 41.w),
                            child: Row(
                              mainAxisAlignment: flow > 0 ?  MainAxisAlignment.spaceBetween : MainAxisAlignment.end,
                              children: [
                                if(flow > 0)
                                InkWell(
                                  onTap: (){
                                    setState(() {
                                      flow = flow -1;
                                    });
                                  },
                                  child: Row(
                                    children: [
                                      Icon(Icons.arrow_back,color: Color(0xFF3F8CFF),size: 22.w),
                                      SizedBox(width: 10.w),
                                      Text('上一步',
                                          style: TextStyle(fontSize: 16.w,fontWeight: FontWeight.normal,color: Color(0xFF3F8CFF))
                                              )
                                    ],
                                  ),
                                ),
                                Container(
                                  margin:
                                      EdgeInsets.only(bottom: 10.w, top: 10.w),
                                  child: SizedBox(
                                    width: 170.w,
                                    child: FilledButton(
                                      style: ElevatedButton.styleFrom(
                                          backgroundColor: Color(0XFF3F8CFF),
                                          shape: RoundedRectangleBorder(
                                              borderRadius:
                                                  BorderRadius.circular(14.w)),
                                          shadowColor: Color(0XFf3F8CFF)
                                              .withOpacity(0.26)),
                                      onPressed: () {

                                        if(flow >= 3){

                                          setState(() {
                                            complete = true;
                                          });
                                          return;
                                        }
                                        setState(() {
                                          flow = flow + 1;
                                        });
                                      },
                                      child: Text('下一步',
                                          style: TextStyle(fontSize: 16.w)
                                              ),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ))
                  ],
                ))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class FlowWidget extends StatefulWidget {
  final int flow;
  final int step;

  final List<String> list;
  const FlowWidget(
      {super.key, required this.flow, required this.step, required this.list});

  @override
  State<FlowWidget> createState() => _FlowWidgetState();
}

class _FlowWidgetState extends State<FlowWidget> {
  Widget firstWidget(bool state, int i) {
    return Container(
      width: 24.w,
      height: 24.w,
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: state
              ? Colors.white
              : i == (widget.flow)
                  ? Colors.white.withOpacity(0.5)
                  : null,
          border: Border.all(
              color: i == 0
                  ? Colors.white
                  : i > widget.flow
                      ? Colors.white.withOpacity(0.5)
                      : Colors.white,
              width: 2.w)),
      child:
          state ? Icon(Icons.check, color: Color(0xFF3F8CFF), size: 14) : null,
    );
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> array = [];
    for (int i = 0; i < widget.step; i++) {
      array.add(Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          firstWidget(widget.flow > i ? true : false, i),
          SizedBox(width: 26.w),
          Text(widget.list[i],
              style: TextStyle(
                      color: i <= widget.flow
                          ? Colors.white
                          : Colors.white.withOpacity(0.4),
                      fontSize: 18.sp)
                  )
        ],
      ));
      array.add(Container(
        margin: EdgeInsets.symmetric(vertical: 6, horizontal: 10),
        width: 2.w,
        height: 26.w,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(2),
            color: i == 0
                ? Colors.white
                : i < widget.flow
                    ? Colors.white
                    : Colors.white.withOpacity(0.5)),
      ));
    }
    array.removeLast();
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: array,
    );
  }
}
